<!DOCTYPE html>
<html> 
    <head>
        <meta charset="utf-8" />
        <!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame -->
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
        <!-- Mobile viewport optimized: h5bp.com/viewport -->
        <meta name="viewport" content="width=device-width">

        <title>BootMetro Demo - Table</title>

        <link rel="stylesheet" type="text/css" href="/LongkongWeb/plugin/bootmetro/css/bootmetro.css">
        <link rel="stylesheet" type="text/css" href="/LongkongWeb/plugin/bootmetro/css/bootmetro-responsive.css">
        <link rel="stylesheet" type="text/css" href="/LongkongWeb/plugin/bootmetro/css/bootmetro-icons.css">
        <link rel="stylesheet" type="text/css" href="/LongkongWeb/plugin/bootmetro/css/bootmetro-ui-light.css">
        <link rel="stylesheet" type="text/css" href="/LongkongWeb/plugin/bootmetro/css/datepicker.css">

        <script src="/LongkongWeb/plugin/jquery/jquery.min.js"></script>
        <script src="/LongkongWeb/plugin/bootmetro/js/modernizr-2.6.2.min.js"></script>
        <script src="/LongkongWeb/plugin/bootmetro/js/bootstrap.min.js"></script>
        <script src="/LongkongWeb/plugin/bootmetro/js/bootmetro-panorama.js"></script>
        <script src="/LongkongWeb/plugin/bootmetro/js/bootmetro-pivot.js"></script>
        <script src="/LongkongWeb/plugin/bootmetro/js/bootmetro-charms.js"></script>
        <script src="/LongkongWeb/plugin/bootmetro/js/bootstrap-datepicker.js"></script>
        <script src="/LongkongWeb/plugin/bootmetro/js/jquery.mousewheel.min.js"></script>
        <script src="/LongkongWeb/plugin/bootmetro/js/jquery.touchSwipe.min.js"></script>
        <script src="/LongkongWeb/plugin/bootmetro/js/holder.js"></script>
        <!--<script src="/LongkongWeb/plugin/bootmetro/js/demo.js"></script>-->

    </head>

    <body>
        <header id="nav-bar" class="container">
            <div class="row">
                <div class="span12">
                    <div id="header-container">
                        <a id="backbutton" class="win-backbutton" href="./"></a>
                        <h5>青岛龙港船舶工程公司</h5>
                        <div class="dropdown">
                            <a class="header-dropdown dropdown-toggle accent-color" data-toggle="dropdown" href="#" >
                                信息办公系统
                                <b class="caret"></b>
                            </a>
                            <ul class="dropdown-menu">
                                <li><a href="./table.html">表格</a></li>
                                <li class="divider"></li>
                                <li><a href="./index.html">主页</a></li>
                            </ul>
                        </div>
                    </div>
                    <div id="top-info" class="pull-right">
                        <!--                        <a id="settings" href="#" class="win-command pull-right">
                                                    <span class="win-commandicon win-commandring icon-cog-3"></span>
                                                </a>-->
                        <a id="logged-user" href="#" class="win-command pull-right">
                            <span class="win-commandicon win-commandring icon-user"></span>
                        </a>
                        <div class="pull-left">
                            <h3>FirstName</h3>
                            <h4>LastName</h4>
                        </div>
                    </div>
                </div>
            </div>
        </header>
   
   <div class="container">
      <div class="row">
         <div class="span12">
   
            <p>Here a table styled</p>
   
            <div id="content-filters" class="row">
               <div class="span12">
                  <ul class="nav nav-pills">
                     <li class="dropdown">
                        <a class="dropdown-toggle accent-color" data-toggle="dropdown" href="#">
                           All projects
                           <b class="caret" href="#"></b>
                        </a>
                        <ul id="projects-filter" class="dropdown-menu">
                           <li><a href="#">All projects</a></li>
                           <li><a href="#">ACME</a></li>
                           <li><a href="#">Surface</a></li>
                           <li><a href="#">OSX</a></li>
                           <li><a href="#">WinRT</a></li>
                        </ul>
                     </li>
                     <li class="dropdown">
                        <a class="dropdown-toggle accent-color" data-toggle="dropdown" href="#">
                           All budgets
                           <b class="caret" href="#"></b>
                        </a>
                        <ul id="budget-filter" class="dropdown-menu">
                           <li><a href="#">All budgets</a></li>
                           <li><a href="#">Budget &lt; 1.000</a></li>
                           <li><a href="#">Budget 1.000 - 10.000</a></li>
                           <li><a href="#">Budget 10.000 - 45.000</a></li>
                           <li><a href="#">Budget 45.000 - 100.000</a></li>
                           <li><a href="#">Budget &gt; 100.000</a></li>
                        </ul>
                     </li>
                     <li class="">
                        <a>&nbsp;|&nbsp;</a><span>Sort by&nbsp;</span>
                     </li>
                     <li class="dropdown">
   
                        <a class="dropdown-toggle accent-color" data-toggle="dropdown" href="#">
                           Project name
                           <b class="caret" href="#"></b>
                        </a>
                        <ul id="sort-filter" class="dropdown-menu">
                           <li><a href="#">Project name</a></li>
                           <li><a href="#">Budget Cost</a></li>
                           <li><a href="#">Duration</a></li>
                        </ul>
                     </li>
                  </ul>
               </div>
            </div>
   
            <div class="row">
               <div class="span12">
   
                  <table class="table table-condensed table-hover">
                     <thead>
                     <tr>
                        <th class="span1">Editable<br/>Checkboxes</th>
                        <th class="span1">Readonly<br/>Checkboxes</th>
                        <th>Project</th>
                        <th>Duration</th>
                        <th class="span2">Contract Value</th>
                        <th class="span2">Budget Cost</th>
                        <th class="span2">Cost Variance</th>
                        <th>Location</th>
                     </tr>
                     </thead>
                     <tbody>
                        <tr>
                           <td class="align-center">
                              <label class="checkbox">
                                 <input type="checkbox"><span class="metro-checkbox"></span>
                              </label>
                           </td>
                           <td class="align-center">
                              <i class="icon-checkmark-2"></i>
                           </td>
                           <td>ACME</td>
                           <td>440 days</td>
                           <td class="span2 align-right">70.570,00&#x20AC;</td>
                           <td class="span2 align-right">70.570,00&#x20AC;</td>
                           <td class="span2 align-right">+3000,00</td>
                           <td>Milano</td>
                        </tr>
                        <tr>
                           <td>
                              <label class="checkbox">
                                 <input type="checkbox"><span class="metro-checkbox"></span>
                              </label>
                           </td>
                           <td class="align-center">
                              <i class="icon-checkmark-2"></i>
                           </td>
                           <td>Surface</td>
                           <td>140 days</td>
                           <td class="span2 align-right">70.570,00&#x20AC;</td>
                           <td class="span2 align-right">70.570,00&#x20AC;</td>
                           <td class="span2 align-right">+3000,00</td>
                           <td>Milano</td>
                        </tr>
                        <tr>
                           <td>
                              <label class="checkbox">
                                 <input type="checkbox"><span class="metro-checkbox"></span>
                              </label>
                           </td>
                           <td class="align-center">
                              <i class="icon-checkmark-2"></i>
                           </td>
                           <td>OSX</td>
                           <td>440 days</td>
                           <td class="span2 align-right">70.570,00&#x20AC;</td>
                           <td class="span2 align-right">70.570,00&#x20AC;</td>
                           <td class="span2 align-right">+3000,00</td>
                           <td>Milano</td>
                        </tr>
                        <tr>
                           <td>
                              <label class="checkbox">
                                 <input type="checkbox"><span class="metro-checkbox"></span>
                              </label>
                           </td>
                           <td class="align-center">
                              <i class="icon-checkmark-2"></i>
                           </td>
                           <td>WinRT</td>
                           <td>1440 days</td>
                           <td class="span2 align-right">170.570,00&#x20AC;</td>
                           <td class="span2 align-right">170.570,00&#x20AC;</td>
                           <td class="span2 align-right">-43000,00</td>
                           <td>Milano</td>
                        </tr>
                     </tbody>
                  </table>
   
               </div>
            </div>
   
         </div>
      </div>
   </div>
   
   <footer class="win-ui-dark win-commandlayout navbar-fixed-bottom">
      <div class="container">
         <div class="row">
            <div class="span6 align-left">
               <button class="win-command">
                  <span class="win-commandicon win-commandring icon-search-2"></span>
                  <span class="win-label">Cerca</span>
               </button>
   
               <hr class="win-command" />
   
               <button class="win-command">
                  <span class="win-commandicon win-commandring icon-reload"></span>
                  <span class="win-label">Reload</span>
               </button>
   
               <button class="win-command">
                  <span class="win-commandicon win-commandring icon-email"></span>
                  <span class="win-label">Send Email</span>
               </button>
            </div>
            <div class="span6 align-right">
               <button class="win-command">
                  <span class="win-commandicon win-commandring icon-remove"></span>
                  <span class="win-label">Delete</span>
               </button>
   
               <button class="win-command">
                  <span class="win-commandicon win-commandring icon-plus-2"></span>
                  <span class="win-label">Add</span>
               </button>
            </div>
         </div>
      </div>
   </footer> 
        <div id="charms" class="win-ui-dark slide">
   
      <div id="theme-charms-section" class="charms-section">
         <div class="charms-header">
            <a href="#" class="close-charms win-backbutton"></a>
            <h2>Settings</h2>
         </div>
   
         <div class="row-fluid">
            <div class="span12">
   
               <form class="">
                  <label for="win-theme-select">Change theme:</label>
                  <select id="win-theme-select" class="">
                     <option value="metro-ui-light">Light</option>
                     <option value="metro-ui-dark">Dark</option>
                  </select>
               </form>
   
            </div>
         </div>
      </div>
   
   </div>

<!--
   <script type="text/javascript">

      $('.panorama').panorama({
         //nicescroll: false,
         showscrollbuttons: true,
         keyboard: true,
         parallax: true
      });

//      $(".panorama").perfectScrollbar();

      $('#pivot').pivot();

   </script>-->
</body>
</html>
